<style scoped>
.layout {
  border: 1px solid #d7dde4;
  background: #f5f7f9;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
}
.layout-logo {
  width: 100px;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  float: left;
  position: relative;
  top: 15px;
  left: 20px;
}
.layout-nav {
  width: 420px;
  margin: 0 auto;
  margin-right: 20px;
}
</style>
<template>
  <div class="layout">
    <Layout>
      <Header>
        <!-- 如果没有登录 -->
        <div id="login-button" v-if="!logined">
          <Button @click="login">登陆</Button>
          <Button @click="register">注册</Button>
        </div>
        <login-modal
          :show_parent="show_login"
          v-on:loginClosed="loginClosed"
          :key="timer_login"
        ></login-modal>
        <register-modal
          :show_parent="show_register"
          v-on:registerClosed="registerClosed"
          :key="timer_register"
        ></register-modal>
        <div id="name">
          <router-link to='/me'> {{ name }}</router-link>
        </div>
       
      </Header>
      <Layout>
        <Sider hide-trigger :style="{ background: '#fff' }">
          <navigation-bar></navigation-bar>
        </Sider>
        <Layout :style="{ padding: '0 24px 24px' }">
          <Content id="content">
           <router-view></router-view>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  </div>
</template>

<script>
import NavigationBar from "./components/NavigationBar";
import LoginModal from "./components/LoginModal.vue";
import RegisterModal from "./components/RegisterModal.vue";
export default {
  components: {
    "login-modal": LoginModal,
    "register-modal": RegisterModal,
    "navigation-bar": NavigationBar
  },
  data() {
    return {
      name:"",
      logined: false,
      show_login: false,
      timer_login: "1",
      show_register: false,
      timer_register: "2",
    };
  },
  created: function () {
    this.$api.get("login/", {}, (response) => {
      if (response.status == 200) {
        var data = response.data;
        if (data.err_code == 0 && data.data.result == true) {
          this.logined = true;
          this.name = data.data.name;
          this.$Message.success(this.name + ",欢迎回来");
        }
      }
    });
  },
  methods: {
    login() {
      this.timer_login = new Date().getTime();
      this.show_login = true;
    },
    loginClosed(params) {
      var login_status = params.logined;
      if (login_status == true) {
        location.reload();
        this.name = params.data.name;
        this.logined = true;
      } else {
        this.show_login = false;
        this.logined = false;
      }
    },
    register() {
      this.timer_register = new Date().getTime();
      this.show_register = true;
    },
    registerClosed(params) {
      var register_status = params.registered;
      if (register_status == true) {
        this.show_register = false;
      }
    },
    
  },
};
</script>
<style scoped>
#login-button {
  position: absolute;
  right: 5%;
}
#name {
  position: absolute;
  right: 5%;
  color:#ffffff;
}
#layout {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}


</style>